<template>
    <scroll-view 
    class="subnav-bar" 
    :scroll="false" 
    :scroll-x="true" 
    :enable-flex="true"
    :throttle="false"
    :show-scrollbar="false" 
    :scroll-left="scrollToLeft"
    scroll-with-animation>
		<view class="flex">
            <view 
            :class="['subnav-bar-item',selectIndex==index?'active':'']" 
            v-for="(item,index) in list"
            :data-id="index" 
            :data-current="index" 
            :key="index"
             @click="onClick">
                <slot :tabItem="item"/>
            </view>
        </view>
    </scroll-view>
</template>

<script>
	export default {
		name: "moScrollbar",
		props: {
			current: {
				type: Number,
                default: 1
			},
			list: {
				type: Array,
                default:()=>[]
			},
            barIndex: {
				type: Number,
                default: 1
			},
		},
		watch: {
            list: {
                handler(newVal,oldVal){
                    this.$nextTick(function(){
                        this.init(this.current);
                    })
                },
                immediate: true
            }
		},
		data() {
			return {
				selectIndex: 0,
                scrollWidth: 0,
                tabListSize: {},
                scrollToLeft: 0
			};
		},
		computed:{
		},
		methods: {
            init(index){
                this.switchTab(index)
                this.getTabbarSize()
            },
            getTabbarSize() {
                // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
                uni.createSelectorQuery().in(this).select('.subnav-bar').fields({
                    dataset: true,
                    size: true,
                }, (res) => {
                    this.scrollWidth = res.width;
                }).exec();

                uni.createSelectorQuery().in(this).selectAll('.subnav-bar-item').boundingClientRect((rects) => {
                    rects.forEach((rect) => {
                        this.tabListSize[rect.dataset.id] = rect;
                    })
                }).exec();
                // #endif
            },
			onClick(e){
                const index = e.target.dataset.current || e.currentTarget.dataset.current;
                const res = this.tabListSize[index]
                const offset = res.left + res.width/2 - this.scrollWidth/2
                this.scrollToLeft = offset > 0 ? offset : 0
                this.switchTab(index)
			},
            switchTab(index) {
                if (this.selectIndex === index) return;
                this.selectIndex = index
                this.$emit('onChange', {barIndex:this.barIndex,_index:index, ...this.list[this.selectIndex]})
            }
		}
	}
</script>

<style lang="scss" scoped>
	.subnav-bar{
        flex-direction: row;
        /* #ifndef APP-PLUS */
        white-space: nowrap;
        /* #endif */
        box-shadow: 0 5rpx 10rpx rgba($color: #000000, $alpha: .05);
	}
	
    /* #ifndef APP-NVUE */
    .subnav-bar ::-webkit-scrollbar {
        display: none;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        background: transparent;
    }
    /* #endif */
    .subnav-bar-item{
        color: #777;
        transition: all 0.2s;
        &.active{
            color: #000;
            font-weight: bold;
        }
    }
</style>
